<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查看掌子面数据</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 页面整体样式 */
        body {
            background-color: #eef2f7; /* 柔和的浅灰蓝色背景 */
            font-family: Arial, sans-serif;
        }
        /* 容器样式 */
        .container {
            max-width: 900px;
            margin: 50px auto;
            background-color: #ffffff;
            padding: 30px;
            border-radius: 12px; /* 圆角边框 */
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        }
        /* 标题样式 */
        .section-title {
            font-size: 28px;
            font-weight: bold;
            text-align: center;
            color: #007bff; /* 蓝色标题 */
            margin-bottom: 30px;
        }
        /* 表单表格样式 */
        .form-table {
            width: 100%;
            table-layout: fixed; /* 固定列宽，确保两边长度一致 */
        }
        .form-table td {
            padding: 15px; /* 单元格间距 */
            vertical-align: middle;
        }
        /* 输入框样式 */
        .form-table input, .form-table select, .form-table textarea {
            width: 100%; /* 填满单元格 */
            padding: 10px;
            font-size: 14px;
            border: 1px solid #ced4da; /* 灰色边框 */
            border-radius: 5px; /* 圆角输入框 */
            box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1); /* 内部阴影 */
            transition: all 0.2s ease; /* 聚焦动画 */
        }
        .form-table input:focus, .form-table select:focus, .form-table textarea:focus {
            border-color: #007bff; /* 聚焦边框颜色 */
            box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.5); /* 聚焦外部光晕 */
        }
        /* 标签样式 */
        .form-label {
            font-weight: bold;
            color: #495057; /* 深灰色字体 */
            display: block;
            margin-bottom: 5px; /* 标签与输入框之间的间距 */
        }
        /* 错误提示样式 */
        .text-danger {
            font-size: 12px;
        }
        /* 按钮样式 */
        .btn-custom {
            width: 100%; /* 按钮宽度填满 */
            padding: 10px;
            font-size: 16px;
            font-weight: bold;
            border-radius: 5px;
        }
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }
        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #004085;
        }
        .btn-secondary {
            background-color: #6c757d;
            border-color: #6c757d;
        }
        .btn-secondary:hover {
            background-color: #5a6268;
            border-color: #545b62;
        }
        /* 调整行距 */
        .row-space {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<div class="container">
    <h2 class="section-title">查看超欠挖诊断数据</h2>
    <form method="post">
        {% csrf_token %}
        <table class="table form-table">
            <tbody>
            {% for field in form %}
                {% if field.name != "operation_reason" %}  <!-- 排除操作理由 -->
                    {% if forloop.counter0|divisibleby:2 %} <!-- 每两项开始一个新行 -->
                        <tr>
                    {% endif %}
                <td>
                    <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
                    {{ field }}
                    {% if field.errors %}
                        <div class="text-danger small">{{ field.errors }}</div>
                    {% endif %}
                </td>
                {% if forloop.counter|divisibleby:2 or forloop.last %} <!-- 每两项结束一个行 -->
                    </tr>
                {% endif %}
                {% endif %}
            {% endfor %}
            <!-- 单独处理操作理由 -->
            <tr>
                <td colspan="2">
                    <label for="{{ form.operation_reason.id_for_label }}" class="form-label">{{ form.operation_reason.label }}</label>
                    <div class="form-control" style="height: 120px; overflow-y: auto;">
                        {% if form.operation_reason.value %}
                            {{ form.operation_reason.value }}
                        {% else %}
                            <span class="text-muted">未填写理由</span>
                        {% endif %}
                    </div>
                    {% if form.operation_reason.errors %}
                        <div class="text-danger small">{{ form.operation_reason.errors }}</div>
                    {% endif %}
                </td>
            </tr>
            </tbody>
        </table>
        <div class="text-center mt-4">
            <a href="{% url 'excavation_diagnosis_records' %}" class="btn btn-secondary btn-lg btn-custom mt-3">返回</a>
        </div>
    </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
